import React, { useEffect, useState } from "react";
import styles from './index.module.less'
import { Menu, Table } from "antd";
import { useRequest } from "ahooks";
import { getRequestCgi } from '@/request'
const { SubMenu, Item } = Menu;
const editTableCell = () => {
    const { data: menuList }: any = useRequest(() => {
        return getRequestCgi('/api/tanle-menu-list')
    }, {
        // manual 手动  true 手动不触发  false 手动触发
        manual: false
    })
    const { data: tableCellList }: any = useRequest(() => {
        return getRequestCgi('/api/table-cell-list')
    }, {
        manual: false
    })

    const [list, setList] = useState()
    const handleChange = (value, key, rowKey) => {
        let list = tableCellList && tableCellList.map((item) => {
            if (item.key === rowKey) {
                return item[key] = value;
            }
            return item;
        })
        setList(list)
    }
    useEffect(() => {
        setList(list)
    }, [tableCellList])
    // 自动生成表头
    const autoRenderHead = (list) => {
        return list && Object.keys(list[0]).map((key, index) => {
            return {
                title: key,
                dataIndex: key,
                width: index === 1 || index === 2 || index ==3  ? 150 : 100
            }
        })
    }

    return (
        <div className={styles['edit-table-cell']}>
            <div className={styles['edit-table-cell__menu']}>
                <Menu mode="inline">
                    {
                        menuList?.list && menuList?.list.map((item: { id: number | React.Key, label: string, children?: { id: number | React.Key, label: string }[] }) => {
                            if (!item.children) {
                                return <Item key={item.id}>{item.label}</Item>
                            }
                            return (
                                <SubMenu title={item.label} key={item.id}>
                                    {
                                        item.children.map((child: { id: number | React.Key, label: string }) => {
                                            return <Menu.Item key={child.id}>{child.label}</Menu.Item>
                                        })
                                    }
                                </SubMenu>
                            )
                        })
                    }

                </Menu>
            </div>
            <div className={styles['edit-table-cell__table']}>
                <Table
                    columns={autoRenderHead(tableCellList)}
                    dataSource={tableCellList}
                    pagination={false}
                    scroll={{
                        x: 55 * 5,
                        y: 55 * 11,
                    }}
                />
            </div>
        </div>
    )
}

export default editTableCell